<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="share.css">
    <style media="screen">
      .cube{
        transform-style: preserve-3d;
        width: 300px;
        height: 300px;
        position: relative;
        top: 50px;
        left: 50px;
        transform: rotateX(0) rotateY(0) rotateZ(0);
        animation: test 8s infinite alternate;
      }
      @keyframes test {
        100%{
          transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
      }
      .cube > .part{
        position: absolute;
        width: 300px;
        height: 300px;
        opacity: 0.7;
        text-align: center;
      }

      .part:nth-of-type(1){
        background-color: #555;
        transform: translateX(-150px) rotateY(90deg);
      }
      .part:nth-of-type(2){
          background-color: black;
          transform: translateY(-150px) rotateX(90deg);
      }
      .part:nth-of-type(3){
          background-color: red;
          transform: translateY(150px) rotateX(90deg);
      }
      .part:nth-of-type(4){
        background-color: blue;
        transform: translateX(150px) rotateY(90deg);
      }
      .part:nth-of-type(5){
        background-color: green;
        transform: translateZ(-150px);
      }
      .part:nth-of-type(6){
        background-color: yellow;
        transform: translateZ(150px);
      }




            .innercube{
              transform-style: preserve-3d;
              width: 100px;
              height: 100px;
              position: fixed;
              top: 100px;
              left: 100px;
              /* transform: rotateX(120deg) rotateY(30deg) rotateZ(60deg);
              animation: test 10s infinite alternate; */
            }
            .innercube > .part{
              position: absolute;
              width: 100px;
              height: 100px;
              opacity: 0.9;
              text-align: center;
            }
      .innercube > .part:nth-of-type(1){
        background-color: #ff00ff;
        transform: translateZ(50px);
      }
      .innercube > .part:nth-of-type(2){
        background-color: #480000;
        transform: translateZ(-50px);
      }
      .innercube > .part:nth-of-type(3){
        background-color: #006699;
        transform: translateX(50px) rotateY(90deg);
      }
      .innercube > .part:nth-of-type(4){
        background-color: #666633;
        transform: translateX(-50px) rotateY(90deg);
      }
      .innercube > .part:nth-of-type(5){
        background-color: #FF9999;
        transform: translateY(50px) rotateX(90deg);
      }
      .innercube > .part:nth-of-type(6){
        background-color: #9966FF;
        transform: translateY(-50px) rotateX(90deg);
      }
      h1{
        color: white;
        line-height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="part"><h1 >一</h1></div>
      <div class="part"><h1 >二</h1></div>
      <div class="part"><h1 >三</h1></div>
      <div class="part"><h1 >四</h1></div>
      <div class="part"><h1 >五</h1></div>
      <div class="part"><h1 >六</h1></div>

      <div class="innercube">
        <div class="part"><h2 >小一</h2></div>
        <div class="part"><h2 >小二</h2></div>
        <div class="part"><h2 >小三</h2></div>
        <div class="part"><h2 >小四</h2></div>
        <div class="part"><h2 >小五</h2></div>
        <div class="part"><h2 >小六</h2></div>
      </div>
    </div>

  </body>
</html>
